<template>
    <div class="other-spxq " >
        <div class="top-bg">
            <img src="/static/images/wd-bg.png" alt="">
        </div>
        <div class="content">
            <div class="fs-13 plr18 pt15">
                <span class="c-fb4957"><span>￥</span><span class="fs-22">199</span></span>
                <span class="c-a4a4a4 ">￥654</span>
            </div>
            <div class="lh25 c-000 fs-16 plr20 title pt10">
                【石泉村木屋酒店亲子套餐】阳光大床房/阳光双床房住宿1晚+2大1小石海天然弗疗户外温泉+杏林大观园景区门票2张+自助早餐
            </div>

            <div class="tabs-banner pt18 pb20">
                <div class="item active">详情介绍</div>
                <div class="item">购买须知</div>
            </div>
            <div>

                
            </div>
        </div>

        <div class="bot-banner" v-if="false">
            <div class="bot-banner-inner kitbox-mid pr15">
                <div class="flex1 kitbox pl15">
                    <div class="item">
                        <div><img src="/static/images/kefu.png" alt=""></div>
                        <div class="fs-12 c-000 pt3">客服</div>
                    </div>
                    <div class="item ml10">
                        <div><img src="/static/images/gwc.png" alt=""></div>
                        <div class="fs-12 c-000 pt3">购物车</div>
                    </div>
                </div>
                <div class="btn jrgwc">加入购物车</div>
                <div class="btn lkgm ml4">立刻购买</div>
            </div>
        </div>

        <div class="bot-banner">
            <div class="bot-banner-inner kitbox-mid pr15">
                <div class="flex1 kitbox pl25">
                    <div class="item">
                        <div><img src="/static/images/kefu.png" alt=""></div>
                        <div class="fs-12 c-000 pt3">客服</div>
                    </div>
                </div>
                <div class="fs-13 tr pr13">
                    <div class="c-ff951f">￥<span class="fs-22">199</span></div>
                    <div class=" c-a4a4a4">￥654 已优惠99元</div>
                </div>
                <div class="btn ljyj ">立即预订</div>
            </div>
        </div>

        <van-popup
            :show="show"
            position="bottom"
            custom-style="height: 70%;"
            >
            <div class="pop-content  pt10">
                <div class="pop-content-inner plr15">
                    <div class="kitbox">
                        <div class="photo"><img src="/static/images/wd-bg.png" alt=""></div>
                        <div class="pl15">
                            <div class="fs-21 c-5b5b5b">199 <span class="fs-12">元</span> </div>
                            <div class="fs-13 c-9f9f9f pt5">库存100件</div>
                            <div class="fs-13 c-9f9f9f pt18">￥299</div>
                        </div>
                    </div>

                    <div class="guige">
                        <div class="c-353535 ptb20">套餐1</div>
                        <div class="guige-list">
                            <div v-for="i in 20" :key="i" class="item active">特色手工体验</div>
                            <!-- <div class="item">2大特权</div> -->
                        </div>
                    </div>

                    <div class="">
                        <div class="c-353535 ptb20 kitbox-mid">
                            <div class="c-333 flex1">数量</div>
                            <div> <van-stepper :value="step" bind:change="onStepChange" /></div>
                        </div>
                    </div>
                </div>
                <div class="btn-group-wrap">
                    <div class="btn-group kitbox plr10">
                        <div class="flex1 plr10"><van-button block round color="linear-gradient(90deg, #fbb53b 1%, #fcae33 12%, #fd9c1e 42%, #ff8200 100%), linear-gradient(#0daf42, #0daf42)" type="default">加入购物车</van-button></div>
                        <div class="flex1 plr10"><van-button block round color="linear-gradient(90deg, #ff5939 1%, #ff3636 42%, #ff1333 100%), linear-gradient(#0daf7d, #0daf7d)" type="default">立刻购买</van-button></div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
export default {
    data(){
        return {
            show: false,
            activeNames: [],
            step: 1
        }
    },
    onShow(){
        
    },
    mounted() {
        
    },
    methods: {
        onChange(e){
            this.activeNames = e.mp.detail
        },
        onStepChange(){

        }
    }
};
</script>
<style lang="scss" >
.other-spxq{
    .top-bg{
        img{
            width: 375px;
	        height: 262px;
            display: block;
        }
    }
    .content{
        position: relative;
        top: -10px;
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
        background: #fff;
        .tabs-banner{
            display: -webkit-box;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            .item{
                font-size: 16px;
                color: #333;
                width: 90px;
                text-align: center;
                position: relative;
                &.active{
                    font-size: 20px;
                    color: #000;
                    &::after{
                        content: "";
                        width: 28px;
                        height: 4px;
                        background-color: #36b274;
                        border-radius: 1px;
                        position: absolute;
                        left: 50%;
                        bottom: -7px;
                        transform: translateX(-50%);
                    }
                }
            }
        }
    }

    .bot-banner{
        height: 80px;
        .bot-banner-inner{
            position: fixed;
            bottom: 0;
            height: 60px;
            background-color: #fff;
            width: 100%;
            left: 0;
            .item{
                width: 40px;
                text-align: center;
                img{
                    width: 19px;
                    height: 20px;
                    display: block;
                    margin: 0 auto;
                }
            }
            .btn{
                color: #fff;
                background-image: linear-gradient(90deg, 
                    #ff5939 1%, 
                    #ff3636 42%, 
                    #ff1333 100%), 
                linear-gradient(
                    #0daf7d, 
                    #0daf7d);
                background-blend-mode: normal, 
                    normal;
                border-radius: 40px;
                width: 112px;
                text-align: center;
                padding: 9px 0;
                &.jrgwc{
                    background-image: linear-gradient(90deg, 
                            #fbb53b 1%, 
                            #fcae33 12%, 
                            #fd9c1e 42%, 
                            #ff8200 100%), 
                        linear-gradient(
                            #0daf42, 
                            #0daf42);
                        background-blend-mode: normal, 
                            normal;
                }
                &.lkgm{
                    background-image: linear-gradient(90deg, 
                        #ff5939 1%, 
                        #ff3636 42%, 
                        #ff1333 100%), 
                    linear-gradient(
                        #0daf7d, 
                        #0daf7d);
                    background-blend-mode: normal, 
                        normal;
                }
                &.ljyj{
                    background-image: linear-gradient(90deg, 
                        #0cae7c 1%, 
                        #0dae7c 12%, 
                        #0dae7d 23%, 
                        #10ad7d 100%), 
                    linear-gradient(
                        #0daf7d, 
                        #0daf7d);
                }
            }
        }
    }

    .pop-content{
        height: 100%;
        .pop-content-inner{
            height: calc(100% - 80px);
            overflow-y: auto;
        }
        .photo{
            img{
                width: 80px;
                height: 79px;
                border-radius: 3px;
                display: block;
            }
        }
        .guige{
            .guige-list{
                display: flex;
                flex-wrap: wrap;
                .item{
                    padding: 5px 7px;                    
                    background-color: #ffffff;
                    border-radius: 3px;
                    border: solid 1px #9f9f9f;
                    color: #9f9f9f;
                    font-size: 15px;
                    margin-right: 7px;
                    margin-bottom: 7px;
                    &.active{
                        color: #37ae86;
                        border: solid 1px #37ae86;
                    }
                }
            }
        }
        .btn-group-wrap{
            height: 80px;
        }
        .btn-group{
            position: absolute;
            bottom: 14px;
            width: 100%;
            left: 0;
        }
    }
}
</style>
